<template>
	<view class="content">
		<view class="con-bg"></view>
		<view class="desc-con">
			<view class="qus-con">
				<view style="text-align: justify;line-height: 42rpx;">
					为提高医院的医疗服务质量，营造更好的就医环境，我们敬请您利用几分钟时间填写本问卷的每一个问题，请您根据亲身感受，对您接触的医护人员的服务进行评价，如果您不方便，可由您的亲友或监护人协助您填写本问卷。
					敬祝您早日康复，感谢您的支持！
				</view>
			</view>
			<view v-for="(item,index) in questionList" :key="index">
				<view class="qus-con" v-if="item.type===1">
					<view>{{item.title}}</view>
					<view style="margin-top: 23rpx;">
						<u-radio-group size="29rpx" v-model="item.userAnswer" placement="row" activeColor="#05A2FF">
							<u-radio v-for="(itema, indexa) in item.optionList" :customStyle="{marginRight: '33rpx'}"
								:key="indexa" :label="itema.content" :name="itema.content">
							</u-radio>
						</u-radio-group>
					</view>
					<view v-if="item.userAnswer === '否' && index === 0"
						style="margin-top: 23rpx;display: flex;align-items: flex-end;">
						<view>大约是第几次？</view>
						<view style="width: 140rpx;margin-left: 15rpx;"><u--input placeholder="请输入" fontSize="27rpx"
								border="bottom" v-model="item.explain"></u--input></view>
						<view>次</view>
					</view>
					<view v-if="item.userAnswer === '不满意' && index === 5"
						style="margin-top: 23rpx;display: flex;align-items: flex-end;">
						<view style="flex-shrink: 0;">请填写不满意科室：</view>
						<view style="width: 300rpx;margin-left: 15rpx;"><u--input placeholder="请输入" fontSize="27rpx"
								border="bottom" v-model="item.explain"></u--input></view>

					</view>
				</view>
				<view class="qus-con" style="padding-right: 0;" v-if="item.type===2">
					<view>{{item.title}}</view>
					<view style="margin-top: 23rpx;">
						<u-checkbox-group size="29rpx" v-model="item.userAnswer" placement="row" shape="circle"
							activeColor="#05A2FF">
							<u-checkbox :customStyle="{width:'218rpx',marginBottom: '23rpx'}"
								v-for="(itema, indexa) in item.optionList" :key="indexa" :label="itema.content"
								:name="itema.content">
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<view style="display: flex;align-items: flex-end;">
						<view style="flex-shrink: 0;">其他：</view>
						<view style="width: 530rpx;margin-left: 8rpx;"><u--input placeholder="请输入" fontSize="27rpx"
								border="bottom" v-model="item.explain"></u--input></view>
					</view>
				</view>
				<view class="qus-con" v-if="item.type===3">
					<view>{{item.title}}</view>
					<view style="margin-top: 23rpx;">
						<u-radio-group size="29rpx" v-model="item.userAnswer" placement="row" activeColor="#05A2FF">
							<u-radio v-for="(itema, indexa) in item.optionList" :customStyle="{marginRight: '33rpx'}"
								:key="indexa" :label="itema.content" :name="itema.content">
							</u-radio>
						</u-radio-group>
					</view>

				</view>
				<view class="qus-con" v-if="item.type===4">
					<view>{{item.title}}</view>
					<view style="margin-top: 23rpx;">
						<u--textarea v-model="item.userAnswer" placeholder="请输入内容"></u--textarea>
					</view>

				</view>
			</view>
			<view class="qus-but" @click="submitForm">
				提交
			</view>
			<!-- <view class="bom-con">
				<view class="qus-but" style="width: 330rpx;" @click="goMail(1)">院长信箱</view>
				<view class="qus-but" style="width: 330rpx;" @click="goMail(0)">书记信箱</view>
			</view> -->
		</view>
		<view class="qus-bom"></view>
	</view>
</template>

<script>
	import {
		questionApi
	} from "@/api/user"
	export default {
		data() {
			return {
				questionList: [{
					"title": "1、您是否是第一次来这家医院看病？",
					"type": 1,
					"optionList": [{
						"content": "是"
					}, {
						"content": "否"
					}],
					"userAnswer": "",
					"explain": ""
				}, {
					"title": "2、您选择市立医院的最主要原因（最多选三项）",
					"type": 2,
					"optionList": [{
						"content": "医疗水平高"
					}, {
						"content": "服务态度好"
					}, {
						"content": "就近方便"
					}, {
						"content": "交通便利"
					}, {
						"content": "费用低"
					}, {
						"content": "其他医院转诊"
					}, {
						"content": "医疗设备好"
					}, {
						"content": "医院名气大"
					}, {
						"content": "环境整洁优美"
					}, {
						"content": "医保定点"
					}, {
						"content": "医院有熟人"
					}, {
						"content": "亲朋好友推荐"
					}, ],
					"userAnswer": [],
					"explain": ""
				}, {
					"title": "3、您对医院公共设施的整体印象如何？（比如座椅、标识、电梯、饮水设备）",
					"type": 3,
					"optionList": [{
						"content": "满意"
					}, {
						"content": "基本满意"
					}, {
						"content": "不满意"
					}],
					"userAnswer": "",
					"explain": ""
				}, {
					"title": "4、您对门诊导医、楼层分诊人员的态度",
					"type": 3,
					"optionList": [{
						"content": "满意"
					}, {
						"content": "基本满意"
					}, {
						"content": "不满意"
					}],
					"userAnswer": "",
					"explain": ""
				}, {
					"title": "5、您对接诊医生的态度",
					"type": 3,
					"optionList": [{
						"content": "满意"
					}, {
						"content": "基本满意"
					}, {
						"content": "不满意"
					}],
					"userAnswer": "",
					"explain": ""
				}, {
					"title": "6、您对收费处、药房、放射科、超声科、检验科、心电图室等科室工作人员的态度",
					"type": 1,
					"optionList": [{
						"content": "满意"
					}, {
						"content": "基本满意"
					}, {
						"content": "不满意"
					}],
					"userAnswer": "",
					"explain": ""
				}, {
					"title": "7、您对医护人员对您进行告知病情的知晓情况（病情、手术、检查）",
					"type": 3,
					"optionList": [{
						"content": "满意"
					}, {
						"content": "基本满意"
					}, {
						"content": "不满意"
					}],
					"userAnswer": "",
					"explain": ""
				}, {
					"title": "8、您对病情的改善情况：",
					"type": 3,
					"optionList": [{
						"content": "满意"
					}, {
						"content": "基本满意"
					}, {
						"content": "不满意"
					}],
					"userAnswer": "",
					"explain": ""
				}, {
					"title": "9、您对医院的总体的评价",
					"type": 3,
					"optionList": [{
						"content": "满意"
					}, {
						"content": "基本满意"
					}, {
						"content": "不满意"
					}],
					"userAnswer": "",
					"explain": ""
				}, {
					"title": "10、您下次需要看病，还会来市立医院看病吗？",
					"type": 3,
					"optionList": [{
						"content": "肯定会"
					}, {
						"content": "可能来"
					}, {
						"content": "肯定不来"
					}],
					"userAnswer": "",
					"explain": ""
				}, {
					"title": "11、您对医院最不满意的是什么？",
					"type": 2,
					"optionList": [{
						"content": "无"
					}, {
						"content": "服务态度差"
					}, {
						"content": "技术水平低"
					}, {
						"content": "环境卫生差"
					}, {
						"content": "医疗费用高"
					}, {
						"content": "到医院不方便"
					}, {
						"content": "等待时间长"
					}, {
						"content": "看病手续繁琐"
					}, ],
					"userAnswer": [],
					"explain": ""
				}, {
					"title": "13、您认为医院最需要加强或改进的方面是什么？",
					"type": 4,
					"userAnswer": "",
					"explain": ""
				}, ],
			}
		},
		methods: {
			goMail(type) {
				uni.navigateTo({
					url: '/pages/mailbox/mailbox?type=' + type
				})
			},
			async submitForm() {
				console.log(this.questionList);
				for (let i = 0; i < this.questionList.length; i++) {
					if (!this.questionList[i].userAnswer) {
						uni.showToast({
							title: '请把问卷填写完整',
							icon: 'none',
							duration: 2000
						})
						return
					}

				}
				if (this.questionList[1].userAnswer.length === 0 && !this.questionList[1].explain) {
					uni.showToast({
						title: '请把问卷填写完整',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.questionList[10].userAnswer.length === 0 && !this.questionList[10].explain) {
					uni.showToast({
						title: '请把问卷填写完整',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.questionList[1].userAnswer.length > 3) {
					uni.showToast({
						title: '第二题最多选三项',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.questionList[0].userAnswer === '否' && !this.questionList[0].explain) {
					uni.showToast({
						title: '请输入第几次来这家医院看病',
						icon: 'none',
						duration: 2000
					})
					return
				}
				let userInfo = uni.getStorageSync('userInfo')
				const res = await questionApi({
					userId: userInfo.id,
					askType: 0,
					ask: JSON.stringify(this.questionList)
				})
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				});
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100%;
		padding-top: 35rpx;
		box-sizing: border-box;

	}

	.qus-bom {
		height: calc(31rpx + env(safe-area-inset-bottom)/2);
	}

	.con-bg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100vw;
		height: 100%;
		background-image: url('#{$IMG_URL}bgqus.png');
		background-repeat: no-repeat;
		background-size: cover;
	}

	.desc-con {
		position: relative;
		z-index: 2;
		margin: 0 auto;
		width: 688rpx;
		font-size: 27rpx;
		color: #000000;
	}

	.qus-con {
		width: 688rpx;
		padding: 31rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 19rpx;
		margin-bottom: 23rpx;
	}

	.qus-con ::v-deep .u-input {
		padding: 0px 6px !important;
	}

	.qus-con ::v-deep .u-checkbox-group--row {
		display: flex !important;
		flex-wrap: wrap !important;
	}

	.qus-con ::v-deep .u-checkbox-group--row .u-checkbox>uni-text {
		color: #000000 !important;
		font-size: 27rpx !important;
	}

	.qus-con ::v-deep .u-radio-group--row .u-radio>uni-text {
		color: #000000 !important;
		font-size: 27rpx !important;
	}

	.qus-but {
		width: 688rpx;
		height: 85rpx;
		background: #05A2FF;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 31rpx;
	}

	.bom-con {
		display: flex;
		width: 688rpx;
		align-items: center;
		justify-content: space-between;
		margin-top: 31rpx;
	}
</style>